import React from 'react';

import Header from '../common/Header';
import CKTable from '../components/CKTable';
import CKModal from '../components/CKModal';
import CKPages from '../components/CKPages';

import moment from 'moment';
import {
    Button,
    Input,
    Form
} from 'amazeui-react';

import Fetch from '../common/Fetch';

class ArticleCategoryManage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: {
                pageSize: 20,
                currentPage: 1,
                totalNum: 43
            },
            data: null,
            currentPage: parseInt(this.props.params.id) || 1,
            dataCount: 1,
            pageNum: 10
        };
    }

    componentDidMount() {
        this.loadCategory(1);
    }

    addCategory = ()=> {
        this.context.router.push('/article_category_edit');
    };

    editCategory = (row)=> {
        this.context.router.push('/article_category_edit/' + row.cipher_id);
    };

    redirectArticle = (row)=> {
        this.context.router.push({
            pathname:'/ArticleManages',
            query:{ctg_id:row.cipher_id}
        });
    };
    delCategory = (row)=> {
        this.modal.confirm('删除文章分类', '确定要删除该分类吗？', ()=> {
            Fetch('/cms/article_category_manage/delete', {cipher_id: row.cipher_id}, (res)=> {
                if (res.status) {
                    if(res.data.error == 40001){
                        this.modal.alert('失败', '该分类下面还有文章，不能被删除')
                    }else if(res.data.error == 40002){
                        this.modal.alert('失败', '该分类下面还有子分类，不能被删除')

                    }else{
                        this.modal.alert('成功', '删除成功！')
                        this.loadCategory(1);
                    }

                } else {
                    this.modal.alert('失败', '删除失败')
                }
            });
        })
        console.log(row.cipher_id)
    }
    getSelect = ()=> {
        // console.log(this.refs.table.getSelectRows());
        this.loadCategory(1);
    };

    getCondition() {
        let query = {
            ctg_name: {
                type: 'like',
                name: 'ctg_name',
                value: this.refs.name.getValue() + '%'
            },
            ctg_parent_name: {
                name: 'ctg_parent_name',
                value: this.refs.parent_name.getValue()
            },
            tpm_name: {
                name: 'tmp_name',
                value: this.refs.tmp_name.getValue()
            }
        }
        return query;
    }

    changeHandler(field) {
        return (e)=> {
            let info = this.state.data;
            info[field] = e.target.value;
            this.setState({data: info});
        }
    }

    loadCategory(page) {
        this.modal.load('正在获取数据中...');
        Fetch('/cms/article_category_manage/query', {
            query: this.getCondition(),
            num: this.state.pageNum,
            page: page
        }, (res)=> {
            if (res.status) {
                this.setState({
                    data: res.data.data.length > 0 ? res.data.data : null,
                    currentPage: page,
                    dataCount: res.data.count
                });

                this.modal.closeModal();
            } else {
                this.modal.alert('失败', '调用文章分类列表出错！' + res.msg);
            }
        });
    }

    render() {
        return (
            <div className="content">
                <Header title="文章分类管理"/>
                <div className="content_main">
                    <p>
                        <h4 className="title">查询条件</h4>
                    </p>
                    <p>
                        <Form inline>
                            <Input ref="name"  placeholder="分类名称"/>
                            <Input ref="parent_name"  placeholder="上级分类" style={{marginLeft:'10px'}}/>
                            <Input ref="tmp_name"  placeholder="模板名称" style={{marginLeft:'10px'}}/>
                            {'\u00a0'}
                            <Button amStyle="secondary" onClick={this.getSelect}>搜索</Button>
                        </Form>
                    </p>
                    <p>
                        <Button amStyle="success" onClick={this.addCategory}>新增分类</Button>
                    </p>
                    <p>
                        <h4 className="title">列表</h4>
                    </p>
                    <p>
                        {this.state.data ? this.renderTable() : this.renderNotData()}
                    </p>
                </div>
                <CKModal ref={(c)=> {
                    this.modal = c
                }}/>
            </div>
        );
    }

    renderTable() {
        return (
            <div>
                <CKTable ref="table" data={this.state.data} select={false}
                         onRefresh={()=>this.loadCategory(1)}>
                    <CKTable.Header text="ID" field="ctg_id"/>
                    <CKTable.Header text="分类名称" field="ctg_name"/>
                    <CKTable.Header text="所属上级" field="ctg_parent_name"/>
                    <CKTable.Header text="发布目录" field="ctg_publish_path"/>
                    <CKTable.Header text="模板名称" field="tmp_name"/>
                    <CKTable.Header text="创建时间" field="created_date" onFormat={(val)=> {
                        return moment.unix(val).format('YYYY-MM-DD HH:mm:ss')
                    }}/>
                    <CKTable.Header text="修改时间" field="modified_date" onFormat={(val)=> {
                        if (val == null) return '--';
                        return moment.unix(val).format('YYYY-MM-DD HH:mm:ss')
                    }}/>
                    <CKTable.Header text="操作">
                        <Button amStyle="primary" onClick={this.redirectArticle} amSize="xs">文章管理</Button>
                        {'\u00a0\u00a0'}
                        <Button onClick={this.editCategory} amSize="xs" amStyle="warning">编辑</Button>
                        {'\u00a0\u00a0'}
                        <Button onClick={this.delCategory} amSize="xs" amStyle="danger">删除</Button>
                    </CKTable.Header>
                </CKTable>
                <CKPages current={this.state.currentPage}
                         number={this.state.pageNum}
                         count={this.state.dataCount}
                         onSelect={(page)=> {
                             this.loadCategory(page)
                         }}/>
            </div>
        );
    }

    renderNotData() {
        return (
            <div style={{textAlign: 'center', fontSize: '24px', paddingTop: '200px'}}>
                没有数据
            </div>
        );
    }
}

ArticleCategoryManage.contextTypes = {
    router: React.PropTypes.object
};

export default ArticleCategoryManage;